import {
  Image,
  ImageRequireSource,
  StyleProp,
  StyleSheet,
  Text,
  View,
  ViewStyle,
} from 'react-native';
import * as React from 'react';

interface CourseCategoryProps {
  name: string;
  image: ImageRequireSource;
  style?: StyleProp<ViewStyle>;
}

export default function CourseCategory(props: CourseCategoryProps) {
  const { name, image, style } = props;
  return (
    <View style={[styles.container, style]}>
      <Image source={image} style={styles.image} />
      <Text style={styles.name}>{name}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    paddingHorizontal: 6,
  },
  image: {
    width: '100%',
    height: 100,
    backgroundColor: 'lightblue',
    borderRadius: 12,
  },
  name: {
    fontSize: 20,
    position: 'absolute',
    color: '#fff',
    bottom: 10,
    right: 10,
    textShadowColor: '#777777',
    textShadowOffset: { width: 1, height: 1 },
    textShadowRadius: 3,
  },
});
